<template>
  <div class="search">
    <van-nav-bar
      v-if="tag === 'skill'"
      title="面试技巧搜索"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-nav-bar
      v-else
      title="面试经验搜索"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="onCancel"
      shape="round"
      show-action
    />
    <div class="space"></div>
    <template v-if="showItem === true">
      <div
        @click="openDetail(item.id)"
        class="itemss"
        v-for="(item, index) in searchItem"
        :key="index"
      >
        <technicItem :item="item" />
      </div>
    </template>
    <div v-if="show" class="hotSearch">
      <h1 class="topTitle">大家都在搜索</h1>
      <div class="hotItem">
        <div
          @click="clickItems(item)"
          class="hotItems"
          v-for="(item, index) in hotSearchList"
          :key="index"
        >
          <span class="hotContent">{{ item }}</span>
        </div>
      </div>
    </div>
    <div v-if="show" class="history">
      <h1 class="topTitle">历史记录</h1>
      <div class="hisItem">
        <div
          class="hisItems"
          @click="clickItems(item)"
          v-for="(item, index) in historyList"
          :key="index"
        >
          <span class="hisContent">{{ item }}</span>
        </div>
      </div>
      <div class="clear" @click="clear">
        清空
      </div>
    </div>
  </div>
</template>

<script>
import {
  articlesTechnicTopSearch,
  articlesShareTopSearch,
  articlesTechnic,
  articlesShare
} from '@/api/api.js'
import technicItem from '@/views/technicList/technicItem.vue'
import { mySetLocal, myGetLocal, myRemoveLocal } from '@/utils/local.js'

export default {
  components: {
    technicItem
  },
  data () {
    return {
      value: '',
      hotSearchList: [],
      show: true,
      showItem: false,
      searchItem: [],
      historyList: myGetLocal('skillHistory') || [],
      tag: this.$route.params.tag
    }
  },
  methods: {
    onSearch (value) {
      // 非空判断
      if (value === '') {
        return
      }
      this.searchValue(value)
      this.show = false // 隐藏大家都在搜索 和历史记录
      this.showItem = true // 显示搜索到的列表
      this.historyList.unshift(value)
      // 数组去重
      this.historyList = [...new Set(this.historyList)]
      mySetLocal('skillHistory', this.historyList)
    },
    onCancel () {
      // this.$router.go(-1)
      this.show = true
      this.showItem = false
      // 点取消清空上次搜索记录
      this.searchItem = []
    },
    onClickLeft () {
      this.$router.go(-1)
    },
    async getHotSearch () {
      if (this.tag === 'skill') {
        const res = await articlesTechnicTopSearch()
        // console.log(res)
        this.hotSearchList = res.data
      } else {
        const res = await articlesShareTopSearch()
        // console.log(res)
        this.hotSearchList = res.data
      }
    },
    // 搜索面试技巧
    async searchValue (value) {
      if (this.tag === 'skill') {
        const res = await articlesTechnic({
          q: value
        })
        res.data.list = res.data.list.map(v => {
          v.cover = process.env.VUE_APP_URL + v.cover
          return v
        })
        this.searchItem = res.data.list
        console.log(this.searchItem)
        var title = this.searchItem[0].title
        console.log(title)
        // this.searchItem[0].title = title.replace(
        //   this.value,
        //   `<span style="color: red">${this.value}</span>`
        // )
        this.searchItem.map(item => {
          return (item.title = title.replace(
            this.value,
            `<span style="color: red">${this.value}</span>`
          ))
        })
      } else {
        const res = await articlesShare({
          q: value
        })
        res.data.list = res.data.list.map(v => {
          v.cover = process.env.VUE_APP_URL + v.cover
          return v
        })
        this.searchItem = res.data.list
        console.log(this.searchItem)
        var titles = this.searchItem[0].title
        console.log(titles)
        // this.searchItem[0].title = title.replace(
        //   this.value,
        //   `<span style="color: red">${this.value}</span>`
        // )
        this.searchItem.map(item => {
          return (item.title = titles.replace(
            this.value,
            `<span style="color: red">${this.value}</span>`
          ))
        })
      }
    },
    clear () {
      this.historyList = []
      myRemoveLocal('skillHistory')
    },
    clickItems (item) {
      this.value = item
      this.onSearch(item)
    },
    openDetail (id) {
      if (this.tag === 'skill') {
        this.$router.push(`/technicDetail/${id}`)
      } else {
        this.$router.push(`/shareDetail/${id}`)
      }
    }
    // clickHis (item) {
    //   this.value = item
    //   this.onSearch(item)
    // }
  },
  created () {
    this.getHotSearch()
  }
}
</script>

<style lang="less" scoped>
.search {
  /deep/ .van-nav-bar__arrow {
    font-size: 18px;
    color: #000;
  }
  /deep/ .van-search--show-action {
    padding: 22px 0 22px 12px;
  }
  .space {
    height: 5px;
    background-color: #f8f8fa;
  }
  .hotSearch {
    padding: 0 18px;
    .topTitle {
      font-size: 18px;
    }
    .hotItem {
      display: flex;
      align-items: center;
      .hotItems {
        padding-right: 10px;
        .hotContent {
          font-size: 12px;
          padding: 8px;
          background-color: #eceaeb;
          border-radius: 5px;
        }
      }
    }
  }
  .history {
    margin-top: 40px;
    padding: 0 18px;
    position: relative;
    .topTitle {
      font-size: 18px;
    }
    .hisItem {
      display: flex;
      align-items: center;
      .hisItems {
        padding-right: 10px;
        .hisContent {
          font-size: 12px;
          padding: 8px;
          background-color: #eceaeb;
          border-radius: 5px;
        }
      }
    }
    .clear {
      font-size: 12px;
      position: absolute;
      top: 0;
      right: 18px;
    }
  }
  .itemss {
    margin-top: 10px;
  }
}
</style>
